<template>
  <div class="main">
    <Home />
    <el-dialog
      v-model="dialogVisible"
      width="300px"
      top="0"
      :close-on-click-modal="false"
    >
      <div class="about-app">
        <div class="icon"></div>
        <h6 class="name">{{ appName }}</h6>
        <p class="version">版本: V{{ version }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  const remote = require("@electron/remote")
  const electron = require('electron')
  const ipcRenderer = electron.ipcRenderer
  import { ref } from 'vue';
  import Home from './views/Home.vue'

  const dialogVisible = ref(false)
  const version = ref(remote.app.getVersion())
  const appName = ref(remote.app.getName())

  ipcRenderer.on('about', () => {
    dialogVisible.value = true
  })

  // 内存使用打印
  // const logBytes = (x) => {
  //   console.log(x[0], x[1] / (1000.0*1000), "MB")
  // }
  // const getMemory = () => {
  //   console.log('--------------')
  //   Object.entries(process.memoryUsage()).map(logBytes)
  //   console.log('--------------')
  // }
  // setInterval(getMemory, 10000)

  // console.log('process.versions.chrome', process.versions.chrome)
</script>

<style lang="less">
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
  }
  html,body {
    height: 100%;
  }
  ::-webkit-scrollbar { 
    width: 10px;
    height: 10px;
    /*background-color: #ddd;*/
  }
  /*滑块*/
  ::-webkit-scrollbar-thumb { 
    background-color: #333;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover { 
    background-color: #5f5f5f;
  }

  /*滑道*/
  ::-webkit-scrollbar-track {
    background-color: #222;
  }
  #app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
  }
  ul,ol {
    list-style: none;
  }
  .main {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-overlay-dialog {
      display: flex;
      align-items: center;
    }
    .el-dialog {
      text-align: center;
      background-color: #222;
      border: 1px solid #505050;
      border-radius: 10px;
      overflow: hidden;
      .el-dialog__body {
        padding: 0;
        color: #fff;
      }
      .el-dialog__close {
        font-size: 24px;
      }
    }
    .about-app {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-bottom: 25px;
      .icon {
        width: 60px;
        height: 60px;
        background-image: url('./assets/icon.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .name {
        font-size: 18px;
        font-weight: bold;
        padding: 15px 0;
      }
      .version {
        font-size: 13px;
      }
    }
    .disable-drag {
      position: relative;
      // 遮盖图片: 禁止拖拽图片到电脑桌面
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0);
      }
    }
  }
</style>
